<template>
  <div class="attention-container">
    <el-card class="attention-card">
      <template #header>
        <div class="card-header">
          <el-icon>
            <Warning />
          </el-icon>
          <span>题目录入注意事项</span>
        </div>
      </template>
      <div class="attention-list">
        <div class="attention-item">
          <div class="item-title">
            <el-icon>
              <Edit />
            </el-icon>
            <span>题型设置规范</span>
          </div>
          <div class="item-content">
            <p>多选题、单选题、判断题题型设置示例：</p>
            <div class="image-group">
              <el-image :src="require('../img/image1.png')" :preview-src-list="[require('../img/image1.png')]"
                fit="contain" />
              <el-image :src="require('../img/image2.png')" :preview-src-list="[require('../img/image2.png')]"
                fit="contain" />
            </div>
          </div>
        </div>

        <div class="attention-item">
          <div class="item-title">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>页面格式要求</span>
          </div>
          <div class="item-content">
            <p>尽量不要带上页眉页脚</p>
          </div>
        </div>

        <div class="attention-item">
          <div class="item-title">
            <el-icon>
              <Warning />
            </el-icon>
            <span>选项格式要求</span>
          </div>
          <div class="item-content">
            <p>选项末尾必须带上换行符，否则会出现题目缺失：</p>
            <el-image :src="require('../img/image3.png')" :preview-src-list="[require('../img/image3.png')]"
              fit="contain" />
          </div>
        </div>

        <div class="attention-item">
          <div class="item-title">
            <el-icon>
              <Document />
            </el-icon>
            <span>材料题要求</span>
          </div>
          <div class="item-content">
            <p>材料题必须在文本开头添加以下标注：</p>
            <el-tag type="info">"阅读以下材料，完成22—25题："</el-tag>
            <el-image :src="require('../img/image4.png')" :preview-src-list="[require('../img/image4.png')]"
              fit="contain" class="mt-2" />
          </div>
        </div>

        <div class="attention-item">
          <div class="item-title">
            <el-icon>
              <Picture />
            </el-icon>
            <span>图片处理</span>
          </div>
          <div class="item-content">
            <p>尽量删除无用的图片，保持文档整洁</p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Edit, Warning, DocumentDelete, Document, Picture } from '@element-plus/icons-vue'

export default {
  name: 'attenceThing',
  components: {
    Edit,
    Warning,
    DocumentDelete,
    Document,
    Picture
  }
}
</script>

<style lang="scss" scoped>
.attention-container {
  padding: 20px;

  .attention-card {
    .card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: bold;

      .el-icon {
        color: var(--el-color-warning);
      }
    }
  }

  .attention-list {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .attention-item {
      .item-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        font-weight: bold;
        color: var(--el-color-primary);

        .el-icon {
          font-size: 20px;
        }
      }

      .item-content {
        padding-left: 28px;

        p {
          margin: 8px 0;
          line-height: 1.5;
        }

        .image-group {
          display: flex;
          gap: 16px;
          margin-top: 12px;
        }

        .el-image {
          max-width: 100%;
          border-radius: 4px;
          border: 1px solid var(--el-border-color-lighter);

          &:hover {
            border-color: var(--el-color-primary);
          }
        }

        .mt-2 {
          margin-top: 8px;
        }
      }
    }
  }
}
</style>
